<template>
  <div class="wrapper">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-form :model="params" ref="formRef" label-width="80px" inline size="medium">
        <el-form-item label="用户名：">
          <el-input
            v-model="params.username"
            placeholder="请输入用户名"
            clearable
            @clear="clear"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="params.realName"
            placeholder="请输入姓名"
            clearable
            @clear="clear"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
            v-model="params.phone"
            placeholder="请输入手机号"
            clearable
            @clear="clear"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="search" icon="el-icon-search" size="medium">
            查 询
          </el-button>
          <el-button type="primary" @click="handleAdd" icon="el-icon-plus" size="medium">
            添加用户
          </el-button>
        </el-form-item>
      </el-form>

      <el-table style="width: 100%" :data="tableData" border stripe>
        <el-table-column
          align="center"
          v-for="col in columns"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="col.id === 'gender'">{{ row.gender | formatGender }}</span>
            <span v-else-if="isStatusColumn(col.id)">
              <el-tag :type="getStatusType(row[col.id])" size="small" effect="dark">
                {{ getStatusLabel(row[col.id]) }}
              </el-tag>
            </span>
            <span v-else>{{ row[col.id] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="240px">
          <template slot-scope="{ row }">
            <el-button type="warning" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button type="success" size="mini" @click="handleAssignRole(row)">
              分配角色
            </el-button>
            <el-button type="danger" size="mini" @click="handleRemove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: center; margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, prev, pager, next, sizes"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/修改弹窗 -->
    <UserDialog
      :show.sync="showUserDialog"
      :editRow="editRow"
      @close="dialogClose"
      @reset="handleReset"
    />
    <AssignRoleDialog
      :show.sync="showAssignDialog"
      :editRow="editAssignRow"
      @close="dialogAssignClose"
    />
  </div>
</template>

<script>
import UserDialog from './components/userDialog.vue'
import AssignRoleDialog from './components/assignRoleDialog.vue'
import { getUserApi, deleteUserApi } from '@/api/user'
export default {
  components: { UserDialog, AssignRoleDialog },
  filters: {
    formatGender(val) {
      let mapper = {
        0: '未知',
        1: '男',
        2: '女'
      }
      return mapper[val]
    }
  },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 5,
        username: '',
        phone: ''
      },
      columns: [
        // {
        //   id: 'userId',
        //   label: 'ID',
        //   width: 'auto'
        // },
        {
          id: 'username',
          label: '用户名',
          width: 'auto'
        },
        {
          id: 'realName',
          label: '姓名',
          width: 'auto'
        },
        {
          id: 'phone',
          label: '手机号',
          width: 'auto'
        },
        {
          id: 'gender',
          label: '性别',
          width: 'auto'
        },
        {
          id: 'idCard',
          label: '身份证号码',
          width: 'auto'
        },
        {
          id: 'isActive',
          label: '是否在职',
          width: 'auto'
        },
        {
          id: 'isDisabled',
          label: '是否禁用',
          width: 'auto'
        }
      ],
      tableData: [],
      total: 0,
      showUserDialog: false,
      params: {
        pageNum: 1,
        pageSize: 10,
        username: '',
        realName: '',
        phone: ''
      },
      editRow: {},
      showAssignDialog: false,
      editAssignRow: {}
    }
  },
  mounted() {
    this.getUserList(this.params)
  },
  methods: {
    isStatusColumn(colId) {
      return ['isAdmin', 'isActive', 'isDisabled'].includes(colId)
    },
    getStatusType(value) {
      return value === '1' ? 'success' : 'info'
    },
    getStatusLabel(value) {
      return value === '1' ? '是' : '否'
    },
    handleSizeChange(val) {
      this.params.pageNum = 1
      this.params.pageSize = val
      this.getUserList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getUserList(this.params)
    },
    handleEdit(row) {
      this.editRow = row
      this.showUserDialog = true
    },
    handleAssignRole(row) {
      this.editAssignRow = row
      this.showAssignDialog = true
    },
    dialogAssignClose() {
      this.showAssignDialog = false
    },
    dialogClose({ update }) {
      update && this.getUserList(this.params)
    },
    handleReset() {
      this.editRow = {}
    },
    handleRemove(row) {
      this.$confirm('<span style="color: red;">此操作不可逆！确定删除？</span>', '操作提示', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await deleteUserApi({ userId: row.userId })
          if (res.success) {
            this.$message.success('删除成功！')
            this.getUserList(this.params)
            return
          }
          this.$message.error('删除失败！')
        })
        .catch(() => {})
    },
    search() {
      if (
        !this.params.username.trim() &&
        !this.params.realName.trim() &&
        !this.params.phone.trim()
      ) {
        this.$message.warning('请先输入要查询的条件')
        return
      }
      this.getUserList(this.params)
    },
    clear() {
      this.getUserList(this.params)
    },
    handleAdd() {
      this.showUserDialog = true
    },
    async getUserList(params) {
      let res = await getUserApi(params)
      if (res.success) {
        this.tableData = res.data.list
        this.total = res.data.total
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 15px;
}
</style>
